html {
  font-size: 15px;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #2c3e50;
}

article {
  width: 400px;
  height: 400px;
  border: solid 2px #ddd;
  position: relative;
  perspective: 900px;

  div {
    position: absolute;
    width: 200px;
    height: 200px;
    border: solid 1px #ddd;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 1s;
    &:nth-child(1) {
      background-color: salmon;
      transform: rotateY(-180deg);
    }
    &:nth-child(2) {
      background-color: seagreen;
      backface-visibility: hidden;
    }
  }
  &:hover {
    div:nth-child(1) {
      transform: rotateY(0deg);
    }
    div:nth-child(2) {
      transform: rotateY(180deg);
    }
  }
}
